//pages/exercise/result.vue
<template>
  <view class="page">
    <!-- 提交成功动画 -->
    <view class="success-animation">
      <view class="success-icon">✨</view>
      <text class="success-text">练习完成！</text>
      <text class="success-tips">继续保持，你已超越80%的考研人 💪</text>
    </view>

    <!-- 得分展示 -->
    <view class="score-section">
      <text class="score-label">本次得分 🎯</text>
      <text class="score-value">{{ score }}分</text>
      <view class="score-comment">{{ getScoreComment(score) }}</view>
      <view class="time-info">⏱️ 答题用时：{{ formatTime(time) }}</view>
    </view>

    <!-- 统计信息 -->
    <view class="stats-section">
      <view class="stat-item">
        <text class="stat-value correct">{{ correctCount }}</text>
        <text class="stat-label">✅ 答对题数</text>
      </view>
      <view class="stat-item">
        <text class="stat-value wrong">{{ wrongCount }}</text>
        <text class="stat-label">❌ 答错题数</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ accuracy }}%</text>
        <text class="stat-label">📊 正确率</text>
      </view>
    </view>

    <!-- 成就展示 -->
    <view class="achievement-section">
      <view class="achievement-item">
        <text class="achievement-icon">🏃‍♂️</text>
        <text class="achievement-text">连续学习{{ streak }}天</text>
      </view>
      <view class="achievement-item">
        <text class="achievement-icon">📚</text>
        <text class="achievement-text">累计练习{{ totalExercises }}套</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="action-btn review-btn" @click="goToReview">
        📖 查看解析
      </button>
      <button class="action-btn retry-btn" @click="goToRetry">
        🔄 重新练习
      </button>
      <button class="action-btn home-btn" @click="goToHome">
        🏠 返回首页
      </button>
    </view>

    <!-- 分享区域 -->
    <view class="share-section">
      <button class="share-btn" @click="handleShare">
        🎉 分享好成绩
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 获取路由参数
const score = ref(0)
const time = ref(0)

// 计算统计数据
const correctCount = ref(17)
const wrongCount = ref(3)
const accuracy = ref(85)
const streak = ref(7)
const totalExercises = ref(68)

// 根据分数获取评语
const getScoreComment = (score) => {
  if (score >= 90) return '🌟 太棒了！继续保持！'
  if (score >= 80) return '💪 表现不错，再接再厉！'
  if (score >= 60) return '🎯 还不错，继续努力！'
  return '📝 下次一定会更好！'
}

onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.$page.options
  
  score.value = parseInt(options.score) || 0
  time.value = parseInt(options.time) || 0
})

// 格式化时间
const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}分${remainingSeconds}秒`
}

// 页面跳转方法
const goToReview = () => {
  uni.navigateTo({
    url: '/pages/exercise/review'
  })
}

const goToRetry = () => {
  uni.showModal({
    title: '提示 ⚡️',
    content: '确定要重新练习吗？',
    success: (res) => {
      if (res.confirm) {
        uni.navigateTo({
          url: '/pages/exercise/detail'
        })
      }
    }
  })
}

const goToHome = () => {
  uni.switchTab({
    url: '/pages/exercise/index'
  })
}

const handleShare = () => {
  uni.showToast({
    title: '分享成功 ✨',
    icon: 'success'
  })
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #fff;
  padding: 40rpx;
}

.success-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 60rpx 0;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  background: #A8BF8F;
  color: #fff;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60rpx;
  margin-bottom: 20rpx;
  animation: zoomIn 0.5s ease;
}

.success-text {
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.success-tips {
  font-size: 26rpx;
  color: #999;
}

.score-section {
  text-align: center;
  margin: 60rpx 0;
}

.score-label {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.score-value {
  font-size: 80rpx;
  color: #A8BF8F;
  font-weight: bold;
}

.score-comment {
  font-size: 28rpx;
  color: #A8BF8F;
  margin-top: 10rpx;
}

.time-info {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

.stats-section {
  display: flex;
  justify-content: space-around;
  margin: 60rpx 0;
  background: #f8f8f8;
  padding: 40rpx;
  border-radius: 20rpx;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.stat-value.correct {
  color: #A8BF8F;
}

.stat-value.wrong {
  color: #ff6b6b;
}

.stat-label {
  font-size: 26rpx;
  color: #999;
}

.achievement-section {
  display: flex;
  justify-content: space-around;
  margin: 40rpx 0;
}

.achievement-item {
  display: flex;
  align-items: center;
  background: rgba(168, 191, 143, 0.1);
  padding: 16rpx 30rpx;
  border-radius: 30rpx;
}

.achievement-icon {
  font-size: 36rpx;
  margin-right: 10rpx;
}

.achievement-text {
  font-size: 26rpx;
  color: #666;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin: 60rpx 0;
}

.action-btn {
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 30rpx;
  border: none;
}

.review-btn {
  background: #A8BF8F;
  color: #fff;
}

.retry-btn {
  background: rgba(168, 191, 143, 0.1);
  color: #A8BF8F;
}

.home-btn {
  background: #f5f5f5;
  color: #666;
}

.share-section {
  margin-top: 40rpx;
}

.share-btn {
  background: #fff;
  color: #A8BF8F;
  border: 2rpx solid #A8BF8F;
  border-radius: 44rpx;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 30rpx;
}

@keyframes zoomIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
</style>